<template lang="">
  <Component
    ref="refComponent"
    v-bind="{
      ...attrs,
      ...pickOwnForBasicComponent(mappingProps, Component.props, attrs),
    }"
    :class="{
      't-fab': true,
      'no-outline':true,
      [styles.module]: true,
      'fabDraggable': true,
      'singleFab':
        !mappingProps.staticItems || mappingProps.staticItems.length === 0,
    }"
    v-show="mappingProps.visible"
  >
    <!-- v-touch-pan.prevent.mouse="moveFab" -->
    <template v-slot:default>
      <FabAction
        v-if="mappingProps.staticItems && mappingProps.staticItems.length > 0"
        v-for="(item, index) in mappingProps.staticItems"
        :key="'FabAction' + index"
        :color="item.color"
        :icon="item.icon"
        @click="fabItemsClick(item)"
        :tabIndex="attrs.tabIndex == undefined ? -1 : attrs.tabIndex"
      />
      <slot v-else name="default" />
    </template>
  </Component>
</template>
<script>
import Component from '@teld/q-components/Fab';
import useMappingProps from 't/common/hooks/useMappingProps';
import {
  commonProps,
  fixNameSpace,
  pickOwnForBasicComponent,
} from 't/common/utils';
import { defineComponent, onMounted, ref, toRaw, watch } from 'vue';
import FabAction from './FabAction';
import styles from './index.module.scss';
import './index.scss';

export * from '@teld/q-components/Fab';

export default defineComponent({
  name: fixNameSpace(Component.name),
  props: {
    ...commonProps,
    ...Component.props,
    staticItems: {
      type: Array,
      default() {
        return [];
      },
    },
    fabDraggable: {
      type: Boolean,
      default() {
        return false;
      },
    },
    dragTop: {
      type: String,
      default() {
        return '0';
      },
    },
    dragLeft: {
      type: String,
      default() {
        return '0';
      },
    },
  },
  emits: ['fab-items-click', 'fab-click'],
  components: { Component, FabAction },
  setup(props, { attrs, emit, expose, slots }) {
    const refComponent = ref();
    const [mappingProps, mappingExpose] = useMappingProps(props, {
      moveFab() {
        moveFab(...arguments);
      },
    });
    const { default: defaultSlot } = slots;
    expose(mappingExpose);
    onMounted(() => {
      if (mappingProps.dragTop) {
        const el = refComponent.value.$el;
        el.style.top = mappingProps.dragTop;
      }
      if (mappingProps.dragLeft) {
        const el = refComponent.value.$el;
        el.style.left = mappingProps.dragLeft;
      }
    });
    watch(
      () => {
        return [
          mappingProps.fabDraggable,
          mappingProps.dragTop,
          mappingProps.dragLeft,
        ];
      },
      (newVal, oldVal) => {
        if (mappingProps.dragTop) {
          const el = refComponent.value.$el;
          el.style.top = mappingProps.dragTop;
        }
        if (mappingProps.dragLeft) {
          const el = refComponent.value.$el;
          el.style.left = mappingProps.dragLeft;
        }
      },
    );
    function onClickHandler(params) {}

    function fabItemsClick(item) {
      emit('fab-items-click', toRaw(item));
    }
    function moveFab(ev) {
      if (mappingProps.fabDraggable && !mappingProps.disable) {
        // mappingProps.disable = ev.isFirst !== true && ev.isFinal !== true;
        const el = refComponent.value.$el;
        el.style.top = ev.position.top - el.clientHeight / 2 + 'px';
        el.style.left = ev.position.left - el.clientWidth / 2 + 'px';
      }
    }
    return {
      refComponent,
      attrs,
      pickOwnForBasicComponent,
      mappingProps,
      Component,
      styles,
      fabItemsClick,
      moveFab,
    };
  },
});
</script>
<style lang="scss">
.fabDraggable {
  position: fixed;
}
</style>
